<template>
  <div id="tool">
    <!-- 头部 -->
    <mt-header fixed title="任务中心" style="height: 0.64rem;"></mt-header>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 图片轮播展示 -->
      <section class="slider-img">
        <mt-swipe :auto="4000">
          <mt-swipe-item><img src="../assets/tool/swipe1.jpg" height="120" width="100%"/></mt-swipe-item>
          <mt-swipe-item><img src="../assets/tool/swipe2.jpg" height="120" width="100%"/></mt-swipe-item>
          <mt-swipe-item><img src="../assets/tool/swipe3.jpg" height="120" width="100%"/></mt-swipe-item>
        </mt-swipe>
      </section>
      <section>
        <div class="group-title">| - 采购单审批</div>
        <!-- 一条分割线 -->
        <div class="line"></div>
        <div class="apps">
          <div class="apps-grid" @click="go('loadmore',$event)">
            <img src="../assets/common/chart.png"/>
            <span>医耗采购审批</span>
          </div>
          <div class="apps-grid" @click="go('servicewaitingapprovallist',$event)">
            <img src="../assets/common/data.png"/>
            <span>后勤采购审批</span>
          </div>
          <div class="apps-grid" @click="go('assetpurchaselist',$event)">
            <img src="../assets/common/note.png"/>
            <span>资产采购审批</span>
          </div>
        </div>
        <div class="apps">
          <div class="apps-grid" @click="go('assetsrecordlist',$event)">
            <img src="../assets/common/chart.png"/>
            <span>资产备案审批</span>
          </div>
        </div>
      </section>

    </div>
  </div>
</template>
<script>
  import {MessageBox} from 'mint-ui';

  export default {
    methods: {
      handleChange() {
        console.info('change')
      },
      go(index, $event) {

        this.$router.push('/tool/' + index);

      },
      developing(title) {
        MessageBox(title, '敬请期待...');
      }

    },
    created() {
      let _footer = this.$store.state.footerVisible;
      if (!_footer) {
        this.$store.commit('TOGGLE_FOOTER');
      }
      this.$store.commit('SELECT_TAB', 'tool')
    }
  }
</script>

<style scoped>
  .mint-button {
    display: flex;
    flex-direction: column;
  }

  .content {
    margin-top: 0.64rem;
    text-align: left;
  }

  .group-title {
    margin-top: 0.1rem;
    font-size: 0.12rem;
    color: #0c60ee;
  }

  .line {
    margin-top: 0.1rem;
    height: 1px;
    background-color: #c4e3f3;
  }

  .apps {
    padding-top: 0.3rem;
    display: flex;
    flex-direction: row;
    justify-content: left;
    flex-wrap: wrap;
  }

  .apps .apps-grid {
    /*flex:1;*/
    width: 33%;
  }

  .apps div {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .apps div {
    display: flex;
    flex-direction: column;
  }

  .apps div span {
    margin-top: 0.05rem;
    font-size: 0.1rem;
  }

  .apps img {
    height: 0.4rem;
    width: 0.4rem;
  }

  .slider-img {
    height: 1.2rem;
    width: 100%;
  }
  .mint-swipe-items-wrap img {display: block !important;}
</style>

